-@title= 'Datagrid | Admin Page '
-@page_classes= 'datagrid easyui-layout'

.container
  .col-12
    .panel.panel-default
      .panel-header
        %i.panel-icon.fa.fa-cog
        .panel-title.panel-with-icon
          Toolbar
      .panel-body
        .col-12.mb-10
          %form.form-inline
            .col-3
              .form-group
                %label Date From:
                %input.form-control.easyui-datebox{'data-options':'height:32'}
            .col-3
              .form-group
                %label To:
                %input.form-control.easyui-datebox{'data-options':'height:32'}
            .col-3
              .form-group
                %label Language:
                %select.form-control.easyui-combobox{'data-options':'width:180, height:32', panelheight: 'auto'}
                  %option{value: 'java'} Java
                  %option{value: 'c'} C
                  %option{value: 'basic'} Basic
                  %option{value: 'perl'} Perl
                  %option{value: 'python'} Python
            .col-3.col-last
              .col-4
                =link_to 'Select', 'javascript:void(0)', iconcls: 'fa fa-check', class:'easyui-linkbutton l-btn-default'
              .col-4
                =link_to 'Insert', 'javascript:void(0)', iconcls: 'fa fa-plus-square', class:'easyui-linkbutton l-btn-primary', onclick:"$('#dlg-add').dialog('open')"
              .col-4.col-last
                =link_to 'Delete', 'javascript:void(0)', iconcls: 'fa fa-minus-square', class:'easyui-linkbutton l-btn-warning'
  .col-12
    .easyui-panel{'data-options': "height:500, cls:'panel-primary panel-datagrid', iconCls:'fa fa-database'", title:'Product List'}
      %table.easyui-datagrid{'data-options':"fit:true, singleSelect:true, striped:true, fitColumns:true, collapsible:true, rownumbers: true, border: false, pagination:true, sortName:'itemid', sortOrder:'asc', url:'assets/javascripts/json/datagridData/demoDatagridData.json',method:'get'"}
        %thead
          %tr
            %th{'data-options':"field:'ck', checkbox:'true'"}
            %th{'data-options':"field:'itemid', sortable:'true', width:80"} Item ID
            %th{'data-options':"field:'productid', sortable:'true', width:100"} Product
            %th{'data-options':"field:'listprice', sortable:'true', width:80"} List Price
            %th{'data-options':"field:'unitcost', sortable:'true', width:80"} Unit Cost
            %th{'data-options':"field:'attr1', sortable:'true', width:250"} Attribute
            %th{'data-options':"field:'status', sortable:'true', width:60"} Status

.easyui-dialog#dlg-add{'data-options':"iconCls:'fa fa-plus-square', modal:true, closed: true, width:500, height:280", title:'Add new rows'}
  %form
    .form-group.col-12.mb-10
      %label Product ID
      %input.easyui-textbox{'data-options':'width:450, height:34', type: 'text'}
    .form-group.col-12.mb-10
      %label Status
      %input.easyui-textbox{'data-options':'width:450, height:34', type: 'text'}
    .form-group
      %a.easyui-linkbutton.l-btn-jump.l-btn-default{href: 'javascript:void(0)', iconCls: 'fa fa-check-circle-o', onclick: 'saveUser()'} Save
      %a.easyui-linkbutton.l-btn-jump.l-btn-dialog-close.l-btn-warning{href: 'javascript:void(0)', iconCls: 'fa fa-times-circle', onclick: "$('#dlg-add').dialog('close')"} Cancel

.container
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        .panel-icon.fa.fa-code
        %h3.panel-title.panel-with-icon
          Datagrid with Vertical Form | Source Code
      .panel-body
        :code
          # lang: html
          <div class='container'>
            <div class='col-12'>
              <div class='panel panel-default'>
                <div class='panel-header'>
                  <i class='panel-icon fa fa-cog'></i>
                  <div class='panel-title panel-with-icon'>
                    Toolbar
                  </div>
                </div>
                <div class='panel-body'>
                  <div class='col-12 mb-10'>
                    <form class='form-inline'>
                      <div class='col-3'>
                        <div class='form-group'>
                          <label>Date From:</label>
                          <input class='form-control easyui-datebox' data-options='height:32'>
                        </div>
                      </div>
                      <div class='col-3'>
                        <div class='form-group'>
                          <label>To:</label>
                          <input class='form-control easyui-datebox' data-options='height:32'>
                        </div>
                      </div>
                      <div class='col-3'>
                        <div class='form-group'>
                          <label>Language:</label>
                          <select class='form-control easyui-combobox' data-options='width:180, height:32' panelheight='auto'>
                            <option value='java'>Java</option>
                            <option value='c'>C</option>
                            <option value='basic'>Basic</option>
                            <option value='perl'>Perl</option>
                            <option value='python'>Python</option>
                          </select>
                        </div>
                      </div>
                      <div class='col-3 col-last'>
                        <div class='col-4'>
                          <a iconcls="fa fa-check" class="easyui-linkbutton l-btn-default" href="javascript:void(0)">Select</a>
                        </div>
                        <div class='col-4'>
                          <a iconcls="fa fa-plus-square" class="easyui-linkbutton l-btn-primary" onclick="$('#dlg-add').dialog('open')" href="javascript:void(0)">Insert</a>
                        </div>
                        <div class='col-4 col-last'>
                          <a iconcls="fa fa-minus-square" class="easyui-linkbutton l-btn-warning" href="javascript:void(0)">Remove</a>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-12'>
              <div class='easyui-panel' data-options="height:500, cls:'panel-primary panel-datagrid', iconCls:'fa fa-database'" title='Product List'>
                <table class='easyui-datagrid' data-options="fit:true, singleSelect:true, striped:true, fitColumns:true, collapsible:true, rownumbers: true, border: false, pagination:true, sortName:'itemid', sortOrder:'asc', url:'assets/javascripts/json/datagridData/demoDatagridData.json',method:'get'">
                  <thead>
                    <tr>
                      <th data-options="field:'ck', checkbox:'true'"></th>
                      <th data-options="field:'itemid', sortable:'true', width:80">Item ID</th>
                      <th data-options="field:'productid', sortable:'true', width:100">Product</th>
                      <th data-options="field:'listprice', sortable:'true', width:80">List Price</th>
                      <th data-options="field:'unitcost', sortable:'true', width:80">Unit Cost</th>
                      <th data-options="field:'attr1', sortable:'true', width:250">Attribute</th>
                      <th data-options="field:'status', sortable:'true', width:60">Status</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
          <div class='easyui-dialog' data-options="iconCls:'fa fa-plus-square', modal:true, closed: true, width:500, height:280" id='dlg-add' title='Add new rows'>
            <form>
              <div class='form-group col-12 mb-10'>
                <label>Product ID</label>
                <input class='easyui-textbox' data-options='width:450, height:34' type='text'>
              </div>
              <div class='form-group col-12 mb-10'>
                <label>Status</label>
                <input class='easyui-textbox' data-options='width:450, height:34' type='text'>
              </div>
              <div class='form-group'>
                <a class='easyui-linkbutton l-btn-jump l-btn-default' href='javascript:void(0)' iconCls='fa fa-check-circle-o' onclick='saveUser()'>Save</a>
                <a class='easyui-linkbutton l-btn-jump l-btn-dialog-close l-btn-warning' href='javascript:void(0)' iconCls='fa fa-times-circle' onclick="$('#dlg-add').dialog('close')">Cancel</a>
              </div>
            </form>
          </div>
